<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>第四节课</title>
		<style type="text/css">
			/*去除原来样式*/
			
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				/*
				 * 将边框设置在中间
				 */
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<canvas id="canvas" width="600" height="600"></canvas>
		</div>
	</body>

	<script>
		
		window.onload = function(){
			
			let oCanvas = document.getElementById("canvas");
			let pen = oCanvas.getContext("2d");
			
			//strokeText() maxWidth 超出最大宽度 文字是显示完全的，但是被压缩了
			//let str = "Hello World! 世界你好！";
			
			//font
			//font-style font-weight font-size font-family
			//normal
			//pen.font = "bold 50px 潮字社凌渡鲲鹏简";
			
			
			
			//填充文字
			//参数(显示的文字 x坐标  y坐标 最大宽度 )（单位px）
			/*pen.strokeText(str,20,60,600);
			pen.strokeStyle = "red";
			pen.fillStyle = "yellow";
			pen.fillText(str,20,60,600);*/
			
			
			
			fontsize = 50;
			
			pen.font = "bold "+fontsize+"px 楷书";
			
			//参数：画笔、文字、x轴方式、y轴方式、文字大小、文字颜色
			myText(pen,"我要居中","center","bottom",fontsize,"red")
			
			
			pen.moveTo(canvas.width/2,0);
			pen.lineTo(canvas.width/2,canvas.height)
			
			pen.moveTo(0,canvas.height/2);
			pen.lineTo(canvas.width,canvas.height/2)
			pen.stroke();
			
			function myText(pen,str,typex,typey,fontsize,color){
				
				var w = canvas.width;
				var h = canvas.height; 
				
				pen.strokeStyle = color;
				//pen.font = "bold 900 50 微软雅黑";
				let textwidth = pen.measureText(str).width;
				let textHeight = pen.measureText(str).height;
				let x = 0;
				if(typex==="center"){
					x = (w-textwidth)/2.0;
				}else if(typex==="left"){
					x=0;
				}else if(typex==="right"){
					x = w-textwidth;
				}
				
				
				
				let y = 0;
				if(typey==="center"){
					y = h/2.0+fontsize/2.0-5;
				}else if(typey==="top"){
					y = 0+fontsize-5;
				}else if(typey==="bottom"){
					y = h-10;
				}
				
				pen.strokeText(str,x,y);
			};
			
			
			
		}
		
		
	</script>

</html>